<!DOCTYPE html>
<html ng-app="appMain">
  <head>
    <meta charset="utf-8">
    <title>Visualizing Streaming Data Sandbox Client</title>
    <link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"/>
    <link rel="stylesheet" type="text/css" href="../node_modules/ng-prettyjson/dist/ng-prettyjson.min.css">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>
  <body ng-controller='controllerMain'>
    <h3>{{ title }}</h3>
    <button ng-repeat="(strKey, objButton) in objButtons" ng-click="objButton.fn();objButton.enabled=!objButton.enabled;" ng-class="{'btn-enabled':objButton.enabled===true}">
    	<i class="fas" ng-class="objButton.icon"></i>&nbsp;{{objButton.label}}
    </button>
    <div layout="row">
      <div ng-if="objButtons.stream.enabled===true" layout="column" ng-include="'./partials/json.htm'" flex></div>
      <div ng-if="col2" flex>
        <div ng-if="objButtons.stats.enabled===true" ng-include="'./partials/stats.htm'" flex></div>
        <div ng-if="objButtons.chart.enabled===true" ng-include="'./partials/chart.htm'" flex></div>
      </div>
    </div>
  </body>
  <!-- pre-requisite libs -->
  <script src="../node_modules/angular/angular.min.js"></script>
  <script src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>
  <script src="../node_modules/angular-animate/angular-animate.min.js"></script>
  <script src="../node_modules/angular-aria/angular-aria.min.js"></script>
  <script src="../node_modules/angular-material/angular-material.min.js"></script>
  <script type="text/javascript" src="../node_modules/ng-prettyjson/dist/ng-prettyjson.min.js"></script>

  <!-- visualization libs -->
  <script src="../node_modules/cytoscape/dist/cytoscape.min.js"></script>
  <script src="../node_modules/cytoscape-cola/cola.js"></script>  
  <script src="../node_modules/cytoscape-cola/cytoscape-cola.js"></script>  
  <script src="./app.js"></script>
</html>
